<!-- 
    time：20024-4-26
    name：meidusa 
    role：图片裁剪
 -->

<template>
    <div class="img-cropping-box">
        <input ref="input" type="file" id="fileInput" @change="changeInput">
        <button ref="button" id="cropButton" :disabled="isdisabled" @click="changeConfirmCrop">剪裁</button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

let isdisabled = ref(false); // 是否禁止
let image = ref<any>(null); // 图片
let isDragging = ref<any>(false); // 是否在剪切
let startX = ref<any>(0);    // 开始的x坐标
let startY = ref<any>(0);    // 开始的Y坐标
let endX = ref<any>(0);    // 结束的x坐标
let endY = ref<any>(0);    // 结束的Y坐标


/**
 * 文件上传
 */
const changeInput = (e: any) => {
    const file = e.target.files[0]
    const reader = new FileReader() // 创建读取器
    reader.onload = (e) => {    // reader异步操作
        image.value = new Image();
        image.value.onload = () => {
            const width = image.value.width;
            const height = image.value.height;
            drawImage(image.value, width, height)
        };
        image.value.src = e.target?.result;
        isdisabled.value = true
    }
    reader.readAsDataURL(file) // 读取url
}

/**
 * 画图片
 * @param img 图片
 * @param width 宽
 * @param height 高
 */
const drawImage = (img: any, width: any, height: any) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d');
    if (ctx) {
        canvas.id = 'canvasA'
        canvas.width = width;
        canvas.height = height;
        ctx?.drawImage(img, 0, 0);
        let croppingDiv = document.querySelector('.cropping')
        croppingDiv?.insertBefore(canvas, croppingDiv.firstChild)

        canvas.addEventListener('mousedown', (e: any) => {
            changeMousedown(e)
        })

        canvas.addEventListener('mousemove', (e: any) => {
            changeMousemove(e, ctx, canvas)
        })

        canvas.addEventListener('mouseup', () => {
            changeMouseup()
        })
    }
}

/**
 * changeMousedown
 */
const changeMousedown = (e: any) => {
    if (isDragging.value) return;
    isDragging.value = true;
    startX.value = e.offsetX;
    startY.value = e.offsetY;
    endX.value = startX.value;
    endY.value = startY.value;
}

/**
 * changeMousemove
 */
const changeMousemove = (e: any, ctx: any, canvas: any) => {
    if (!isDragging.value) return;
    endX.value = e.offsetX;
    endY.value = e.offsetY;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(image.value, 0, 0);
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(startX.value, startY.value, endX.value - startX.value, endY.value - startY.value);
}

/**
 * changeMouseup
 */
const changeMouseup = () => {
    isDragging.value = false;
    if (endX.value > startX.value && endY.value > startY.value) {
        isdisabled.value = false
    }
}

/**
 * 确认裁剪
 */
const changeConfirmCrop = () => {
    const croppedCanvas = document.createElement('canvas')
    const croppedCtx = croppedCanvas.getContext('2d')
    croppedCanvas.id = 'canvasB'
    const canvasA: any = document.getElementById('canvasA')
    const width = endX.value - startX.value;
    const height = endY.value - startY.value;
    croppedCanvas.width = width
    croppedCanvas.height = height
    croppedCtx?.drawImage(canvasA, startX.value, startY.value, width, height, 0, 0, width, height)
    croppedCanvas.toBlob((blob) => {
        if (blob) {
            const file = new File([blob], 'cropping.png', { type: 'image/png' })    // 转blob
            console.log(file);
            // 后续可以进行上传
        }
    })
    document.body.appendChild(croppedCanvas)
}
</script>

<style lang="scss" scoped></style>